<template>
    <view style="width: 100%;box-sizing: border-box;">
        <view class="flex just-between align-center" style="width: 100%;margin-bottom: 8rpx;">
            <view class="chnltype" :style="{ backgroundColor: color, color: color ? '#fff' : '#000' }" v-if="chnlType">
                {{ chnlType }}
            </view>
            <view class="chnltype" :style="{ backgroundColor: color, color: color ? '#fff' : '#000' }" v-else>
                {{ chnlType }}
            </view>
            <view style="color: #E43E00;" class="bold">{{ formatDate(scope.commentTime) }}</view>
        </view>
        <view style="border-bottom: 1rpx solid #E1E1E1;height: 10rpx;margin: 10rpx 0 6rpx 0"></view>
        <view class="flex align-center">
            <text>订单评分：</text>
            <eui-rate :readonly="true" :value="scope.orderCommentScore" :size="50" :is-fill="false" />
        </view>
        <view class="flex" v-if="scope.foodCommentScore || scope.packingScore || scope.deliveryCommentScore"
            style="margin: 10rpx 0;">
            <view v-if="scope.foodCommentScore" style="margin-right: 50rpx;">商品{{ scope.foodCommentScore }}星</view>
            <view v-if="scope.packingScore" style="margin-right: 50rpx;">包装{{ scope.packingScore }}星</view>
            <view v-if="scope.deliveryCommentScore" style="margin-right: 50rpx;">配送{{ scope.deliveryCommentScore }}星
            </view>
        </view>
        <view style="font-size: 28rpx; margin: 6rpx 0;">{{ scope?.commentContent }}</view>
        <view v-if="!!scope?.commentPics && scope?.commentPics?.split(',')?.length > 0">
            <ImageList :list="scope?.commentPics?.split(',')" />
        </view>
        <view v-if="!!formatData(scope?.praiseFoodList)" class="flex" style="align-items: baseline;margin-top: 10rpx;">
            <eui-uicons :size="40" type="hand-up" style="color: #777;"></eui-uicons>
            <view style="font-size: 28rpx;color: #777777;">{{ formatData(scope?.praiseFoodList) }}</view>
        </view>
        <view v-if="!!formatData(scope?.criticFoodList)" class="flex" style="align-items: baseline;margin-top: 10rpx;">
            <eui-uicons :size="40" type="hand-down" style="color: #777;"></eui-uicons>
            <view style="font-size: 28rpx;color: #777777;">{{ formatData(scope?.criticFoodList) }}</view>
        </view>
        <view v-if="scope.showReply">
            <textarea
                style="border: 1px solid #ccc; width: 100%; height:180rpx; border-radius:5rpx; margin: 10rpx 0; padding: 10rpx; box-sizing: border-box"
                placeholder="请输入回复内容，提交成功后会经过平台审核，审核通过后才会在顾客端展示，提交成功后不可修改，请注意礼貌用语" @blur="onBlur" @input="inputChange"
                v-model="replyValue" :maxlength="maxNumber" @confirm="onConfirm" />
            <view style="text-align: right">{{ maxNumber - replyValue.length > 0 ? maxNumber - replyValue.length :0}}/{{
                maxNumber}}
            </view>
        </view>
        <view v-if="!!scope?.tenantReplyContent" style="margin-top: 8rpx;">
            <view class="bold"><text>商家回复</text><text style="margin-left: 40rpx;">{{ scope?.tenantReplyTime }}</text>
            </view>
            <view style="font-size: 28rpx; margin: 6rpx 0;">{{scope?.tenantReplyContent}}</view>
        </view>
        <view v-if="!!scope?.addComment">
            <view class="bold"><text>用户追评</text><text style="margin-left: 40rpx;">{{ scope?.addCommentTime }}</text>
            </view>
            <view style="font-size: 28rpx; margin: 6rpx 0;">{{ scope?.addComment}}</view>
        </view>
        <view style="border-top: 1rpx solid #E1E1E1;height: 10rpx;margin: 10rpx 0"></view>
        <view class="flex">
            <view style="width: 70%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                评价ID：{{ scope?.thirdCommentId }}
            </view>
            <CopyItem :data="scope.thirdCommentId" style="margin-left: 20rpx;">
                <template v-slot:default>
                    <view class="icon-tag">复制单号</view>
                </template>
            </CopyItem>
        </view>
        <view class="flex" style="margin-top: 10rpx;">
            <view>订单号：{{ scope?.thirdOrderNo }}</view>
            <CopyItem :data="scope.thirdOrderNo" style="margin-left: 20rpx;">
                <template v-slot:default>
                    <view class="icon-tag">复制单号</view>
                </template>
            </CopyItem>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, watch, watchEffect } from 'vue';
import { computed, defineProps } from 'vue';
import ImageList from '../../components/ImageList.vue';
import CopyItem from '../../components/CopyItem.vue';

const props = defineProps<{
    scope?: any;
    chnlTypeList?: any[];
}>()

const emit = defineEmits([
    'inputChange'
]);

const replyValue = ref('')

const chnlType = computed(() => {
    return props.chnlTypeList?.find(v => v.value == props.scope.chnlType)?.text || props.scope.chnlType
})

const color = computed(() => {
    return props.chnlTypeList?.find(v => v.value == props.scope.chnlType)?.color || '#000'
})

const maxNumber = computed(() => {
    let max
    switch (props.scope?.chnlType) {
        case 'eleme':
            max = 150;
            break;
        case 'meituan':
            max = 1024;
            break;
        default:
            max = 200;
            break;
    }
    return max
})

const formatDate = function (dateStr:string) {
    const date = new Date(dateStr.replace(/-/g, '/'));
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}.${month}.${day}`;
}

const formatData = (data:any) => {
    if (!!data) {
        try {
            let jsonObj = JSON.parse(data), list:any = [];
            if (Array.isArray(jsonObj)) {
                jsonObj.forEach((item) => {
                    list.push(item.goodsName)
                });
                return list.join(',')
            } else {
               return ''
            }
        } catch (e) {
            return ''
        }
    }else{
        return ''
    }
}

watch(() => props.scope?.showReply, (newVal) => {
    if (newVal){
        replyValue.value = ''
    }
}, { immediate: true });

watch(() => props.scope?.replyValue, (newVal) => {
    if (newVal) {
        replyValue.value = newVal
    }
}, { immediate: true });

const inputChange = (e:any) => {
    if (e.detail.value.length > maxNumber.value){
        replyValue.value = e.detail.value.substring(0, maxNumber.value)
    }
    emit('inputChange', { commentId: props.scope?.commentId, content: replyValue.value });
}

const onBlur = () => {
    if (replyValue.value?.length<5){
        uni.showToast({
            icon: 'none',
            title: `最少回复5个字`,
        })
    } 
    emit('inputChange', { commentId: props.scope?.commentId, content: replyValue.value });
}

const onConfirm = () => {
    if (replyValue.value?.length < 5) {
        uni.showToast({
            icon: 'none',
            title: `最少回复5个字`,
        })
    } 
    emit('inputChange', { commentId: props.scope?.commentId, content: replyValue.value });
}

</script>
<style lang="scss" scoped>
@import "../../common/common.css";

.flex {
  display: flex;
}

.popup-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  background-color: #fff;

  .popup-title {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 100rpx;
    padding-right: 36rpx;
    padding-left: 30rpx;
    font-size: 33rpx;
    line-height: 100rpx;
    border-bottom: 1rpx solid #f1f1f1;
  }
}

.bottom-1 {
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
  height: 70rpx;
}


.title-view {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 46rpx;
  margin-bottom: 24rpx;
}

.title-text {
  margin-top: 0;
  font-size: 32rpx;
  font-style: normal;
  font-weight: 600;
  //   color: $uni-text-color-primary;
  line-height: 45rpx;
  text-align: left;
}
</style>